<template>
    <el-row class="contain-box">
        <site-nav>&emsp;>&emsp;<strong><i>{{info.departmentName}}</i></strong></site-nav>
        <div class="view-body">
            <el-row>
                <el-form class="inline-form" inline>
                    <el-form-item>
                        <el-button @click="$router.go(-1)"><i class="el-icon-arrow-left el-icon--left"/>返回
                        </el-button>
                    </el-form-item>
                    <el-form-item label="职位">
                        <el-select @change="getDataList" filterable placeholder="请选择" v-model="dutyId">
                            <el-option label="所有职位" value="0"/>
                            <el-option :key="item.dutyId" :label="item.dutyName" :value="item.dutyId"
                                       v-for="item in duties"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="submitting" @click="save" type="primary">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col>
                    <el-table :data="permissionList" border>
                        <el-table-column label="权限名称" prop="permissionName"/>
                        <el-table-column label="权限关键字" prop="permissionKey"/>
                        <el-table-column label="权限说明" prop="remark"/>
                        <el-table-column align="left" label="操作">
                            <template slot-scope="scope">
                                <el-switch v-model="sets[scope.row.permissionKey]"/>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>
    </el-row>
</template>

<script lang="ts">
  import {ID} from '@/api/http';
  import DepartmentApi from '@/api/user/departmentApi';
  import DutyApi from '@/api/user/dutyApi';
  import DutyPermissionApi from '@/api/user/dutyPermissionApi';
  import PermissionApi from '@/api/user/permissionApi';
  import Department from '@/structure/department';
  import Duty from '@/structure/duty';
  import Permission from '@/structure/permission';
  import {Component, Vue} from 'vue-property-decorator';

  @Component
  export default class Page extends Vue {
    public submitting: boolean = false;
    public duties: Duty[] = [];
    public permissionList: Permission[] = [];
    public departmentId: ID = '0';
    public dutyId: ID = '0';
    public info: Department = {
      departmentName: '全部部门'
    } as Department;
    public sets: { [key: number]: boolean } = {};

    public created(): void {
      this.departmentId = this.$route.params.departmentId;

      if (this.departmentId !== '0') {
        DepartmentApi.findOne(this.departmentId).then((res) => {
          this.info = res;
        });
      }

      DutyApi.all().then((res) => {
        this.duties = res;
      });
      PermissionApi.all().then((res) => {
        this.permissionList = res;
      });

      this.getDataList();
    }

    public getDataList(): void {
      this.sets = {};
      if (this.dutyId === null) {
        return;
      }
      DutyPermissionApi
        .findList(this.departmentId, this.dutyId)
        .then((res) => {
          res.forEach((set) => {
            this.$set(this.sets, set.permissionKey, true);
          });
        });
    }

    public save(): void {
      const keys = [];

      for (const key in this.sets) {
        if (this.sets[key]) {
          keys.push(key);
        }
      }

      this.submitting = true;
      DutyPermissionApi.save(this.departmentId, this.dutyId, keys).then(() => {
        this.$message.success('保存成功');
        this.submitting = false;
      }).catch(() => {
        this.submitting = false;
      });
    }
  }
</script>

